//use gloo::console::log;
use stylist::yew::styled_component;

use yew::{html, Callback, Html, Properties};

#[derive(Properties, PartialEq)]
pub struct MenuButtonProps {
    pub text: String,
    #[prop_or_default]
    pub onclick: Callback<()>,
}

#[styled_component]
pub fn MenuButton(props: &MenuButtonProps) -> Html {
    let onclick = props.onclick.clone();
    html! {
        <div class={css!(r#"
            button:hover {
                color: black;
            }
         "#)}
        >
            <button onclick={move |_| onclick.emit(())} class={css!(r#"
                  border: none;
                  padding: 5 5px;
                  outline: none;
                  border-radius: 5px;
                  margin-right: 5px;
                  color: #75878a; 
                "#)}>{props.text.clone()}</button>
        </div>

    }
}
